<template>
  <view class="container">
    <!-- 顶部图片区域 -->
    <view class="image_box">
      <image :src="goodsInfo.bannerPicture" class="image" />
    </view>
    <!-- tabs栏 -->
    <view class="tabs">
      <text
        :class="{ active: currentIndex === index }"
        v-for="(item, index) in goodsInfo.subTypes"
        :key="item.id"
        @click="switchTab(index)"
        >{{ item.title }}</text
      >
    </view>
    <!-- 内容区域 -->
    <scroll-view
      scroll-y
      @scrolltolower="onScrolltolower"
      v-for="(item, index) in goodsInfo.subTypes"
      :key="item.id"
      v-show="currentIndex === index"
      class="scroll_box"
    >
      <!-- 商品 -->
      <view class="goods_box">
        <!-- 每个商品 -->
        <view class="goods_item" v-for="item1 in item.goodsItems.items" :key="item1.id">
          <navigator
            :url="`/pages/goodsDetail/goodsDetail?id=${item1.id}`"
            style="width: 100%; height: 100%"
          >
            <image :src="item1.picture" class="image" />
            <view>{{ item1.name }}</view>
            <text class="price_box">￥{{ item1.price }}</text>
          </navigator>
        </view>
      </view>
      <view class="bottom">{{ tipText }}</view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 引入接口函数
import { getHotPageAPI } from '@/api/hot'
// 引入ts类型
import type { goodsInfoType } from '@/types/hot'
// 四个热门推荐模块的数据
const modeMap = [
  { id: '5', title: '特惠推荐', url: '/hot/preference' },
  { id: '6', title: '爆款推荐', url: '/hot/inVogue' },
  { id: '7', title: '一站买全', url: '/hot/oneStop' },
  { id: '8', title: '新鲜好物', url: '/hot/new' },
]
// 获取传递过来的参数
const query = defineProps<{
  id: string
}>()
// 找出符合条件的模块
const currentMode = modeMap.find((item) => item.id === query.id)
// 动态设置标题
uni.setNavigationBarTitle({ title: currentMode!.title })
// 当前激活的tab栏的索引
const currentIndex = ref<number>(0)
// 页面数据对象
const goodsInfo = ref<goodsInfoType>({} as goodsInfoType)
// 滚动底部文字
const tipText = ref('正在加载...')
// 获取热门推荐数据的函数
const getHotPageData = async (page: number, pageSize: number, id?: string) => {
  const res = await getHotPageAPI(currentMode!.url, page, pageSize, id)
  if (res.code === '1') {
    // 判断id是否存在？存在，则证明是下拉刷新
    if (id) {
      // 存在，是下拉刷新
      // 找出索引
      const index = goodsInfo.value.subTypes.findIndex((item) => item.id === id)
      // 将刷新出来的商品数据push到当前数组中
      goodsInfo.value.subTypes[index].goodsItems.items.push(
        ...res.result.subTypes[index].goodsItems.items,
      )
      // 同时更新下当前的页数跟总页数
      goodsInfo.value.subTypes[index].goodsItems.page = res.result.subTypes[index].goodsItems.page
      goodsInfo.value.subTypes[index].goodsItems.pages = res.result.subTypes[index].goodsItems.pages
    } else {
      // 不存在，是获取全部数据
      goodsInfo.value = res.result
    }
  }
}
// 切换tab栏的回调
const switchTab = (index: number) => {
  currentIndex.value = index
}
// 滚动到底部的回调
const onScrolltolower = () => {
  // 当前tab页的page
  let page = goodsInfo.value.subTypes[currentIndex.value].goodsItems.page
  // 当前tab页的pageSize
  const pageSize = goodsInfo.value.subTypes[currentIndex.value].goodsItems.pageSize
  // 当前tab页的总页数
  const pages = goodsInfo.value.subTypes[currentIndex.value].goodsItems.pages
  // 当前tab页的id
  const id = goodsInfo.value.subTypes[currentIndex.value].id
  // 判断当前页是否超出最大的页数
  if (page < pages) {
    // 没超过，page++，重新获取数据
    tipText.value = '正在加载...'
    page = page + 1
    getHotPageData(page, pageSize, id)
  } else {
    // 数据到底了，修改底部文字
    tipText.value = '到底啦~'
  }
}
onLoad(() => {
  getHotPageData(1, 10)
})
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  background-color: #e8e8e8;
  height: 100vh;
  .image_box {
    width: 100vw;
    height: 240rpx;
    border-radius: 0 0 20rpx 20rpx;
    overflow: hidden;
    flex-shrink: 0;
    .image {
      width: 100%;
      height: 100%;
    }
  }
  .tabs {
    flex-shrink: 0;
    display: flex;
    justify-content: space-evenly;
    position: relative;
    top: -40rpx;
    height: 120rpx;
    line-height: 100rpx;
    margin: 0 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    font-size: 28rpx;
    .active {
      position: relative;
      ::before {
        content: '';
        position: absolute;
        top: 80rpx;
        left: 50%;
        margin-left: -25rpx;
        width: 50rpx;
        height: 4rpx;
        background-color: #ff0034;
      }
    }
  }
  .scroll_box {
    box-sizing: border-box;
    flex: 1;
    overflow-y: scroll;
    position: relative;
    top: -40rpx;
    .goods_box {
      padding-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0 23rpx;
      .goods_item {
        position: relative;
        flex: 48%;
        background-color: #fff;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        box-sizing: border-box;
        padding: 16rpx;
        height: 460rpx;
        font-size: 26rpx;
        .image {
          width: 310rpx;
          height: 310rpx;
        }
        .price_box {
          position: absolute;
          bottom: 10rpx;
          left: 10rpx;
          color: #d14c4c;
        }
      }
      .goods_item:nth-child(odd) {
        margin-right: 10rpx;
      }
      .goods_item:nth-child(even) {
        margin-left: 10rpx;
      }
    }
    .bottom {
      text-align: center;
      color: #666;
      font-size: 32rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
}
</style>
